/**
 * 应用主组件 (Application Main Component)
 * 
 * 功能说明：
 * - 配置应用路由系统
 * - 定义主要页面布局结构
 * - 实现用户认证状态管理
 * - 提供全局导航和侧边栏
 * - 实现路由权限控制
 * - 支持懒加载和代码分割
 * 
 * 路由结构：
 * - 公共路由：首页、商品列表、商品详情
 * - 认证路由：登录、注册、重置密码
 * - 受保护路由：个人中心、发布商品、消息、交易等
 * - 错误页面：404页面
 * 
 * 权限控制：
 * - PublicRoute: 仅未登录用户可访问
 * - ProtectedRoute: 仅已登录用户可访问
 * - 动态侧边栏显示
 * 
 * 性能优化：
 * - React.lazy() 懒加载
 * - Suspense 加载状态
 * - 路由级别的代码分割
 */

import React, { Suspense, useEffect } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import { Layout, Spin } from 'antd'

// 导入布局组件
import AppHeader from '@components/layout/AppHeader'
import AppSider from '@components/layout/AppSider'
import AppFooter from '@components/layout/AppFooter'

// 导入状态管理
import { useAuthStore } from '@stores/auth'

/**
 * 页面组件懒加载配置
 * 
 * 使用React.lazy()实现代码分割：
 * - 减少初始包大小
 * - 按需加载页面组件
 * - 提高应用启动速度
 * - 优化用户体验
 */
const HomePage = React.lazy(() => import('@pages/Home'))
const LoginPage = React.lazy(() => import('@pages/Login'))
const RegisterPage = React.lazy(() => import('@pages/Register'))
const ForgotPasswordPage = React.lazy(() => import('@pages/ForgotPassword'))
const ProductListPage = React.lazy(() => import('@pages/ProductList'))
const ProductDetailPage = React.lazy(() => import('@pages/ProductDetail'))
const ProductEditPage = React.lazy(() => import('@pages/ProductEdit'))
const ProfilePage = React.lazy(() => import('@pages/Profile'))
const ChatPage = React.lazy(() => import('@pages/Chat'))
const TradesPage = React.lazy(() => import('@pages/Trades'))
const TradeDetailPage = React.lazy(() => import('@pages/TradeDetail'))
const FavoritesPage = React.lazy(() => import('@pages/Favorites'))
const SettingsPage = React.lazy(() => import('@pages/Settings'))
const SettingsPasswordPage = React.lazy(() => import('@pages/SettingsPassword'))
const NotFoundPage = React.lazy(() => import('@pages/NotFound'))
const WalletPage = React.lazy(() => import('@pages/Wallet'))

// 直接导入的页面组件（非懒加载）
// import SettingsPasswordPage from './pages/SettingsPassword'

const { Content } = Layout

/**
 * 受保护的路由组件 (Protected Route Component)
 * 
 * 功能：
 * - 检查用户登录状态
 * - 未登录用户重定向到登录页
 * - 已登录用户正常访问页面
 * 
 * 使用场景：
 * - 个人中心页面
 * - 发布商品页面
 * - 消息聊天页面
 * - 交易管理页面
 * - 设置页面
 * 
 * @param {React.ReactNode} children - 子组件
 * @returns {React.ReactNode} 受保护的组件或重定向
 */
function ProtectedRoute({ children }) {
  const { isAuthenticated } = useAuthStore()
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />
  }
  
  return children
}

/**
 * 公共路由组件 (Public Route Component)
 * 
 * 功能：
 * - 检查用户登录状态
 * - 已登录用户重定向到首页
 * - 未登录用户正常访问页面
 * 
 * 使用场景：
 * - 登录页面
 * - 注册页面
 * - 重置密码页面
 * 
 * @param {React.ReactNode} children - 子组件
 * @returns {React.ReactNode} 公共组件或重定向
 */
function PublicRoute({ children }) {
  const { isAuthenticated } = useAuthStore()
  
  if (isAuthenticated) {
    return <Navigate to="/" replace />
  }
  
  return children
}

/**
 * 应用主组件 (Application Main Component)
 * 
 * 功能：
 * - 应用启动时检查认证状态
 * - 渲染应用布局结构
 * - 配置路由系统
 * - 提供加载状态管理
 * 
 * 布局结构：
 * - AppHeader: 头部导航栏
 * - AppSider: 侧边栏导航（仅登录用户）
 * - Content: 主内容区域
 * - AppFooter: 底部信息
 */
function App() {
  const { checkAuth, isAuthenticated } = useAuthStore()

  /**
   * 应用启动时检查认证状态
   * 
   * 功能：
   * - 验证本地存储的token
   * - 更新用户认证状态
   * - 初始化用户信息
   */
  useEffect(() => {
    checkAuth()
  }, [checkAuth])

  return (
    <Layout style={{ minHeight: '100vh' }}>
      {/* 头部导航栏 */}
      <AppHeader />
      
      {/* 侧边栏导航（仅登录用户显示） */}
      {isAuthenticated && <AppSider />}
      
      {/* 主内容区域 */}
      <Layout>
        <Content
          style={{
            minHeight: 'calc(100vh - 64px)', // 减去头部高度
            background: '#f5f5f5'
          }}
        >
          {/* 页面内容区域 */}
          <Suspense 
            fallback={
              <div style={{ 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                height: '50vh'
              }}>
                <Spin size="large" />
              </div>
            }
          >
            <Routes>
              {/* ==================== 公共路由 ==================== */}
              
              {/* 首页 - 平台欢迎页面 */}
              <Route path="/" element={<HomePage />} />
              
              {/* ==================== 认证相关路由 ==================== */}
              
              {/* 登录页面 - 仅未登录用户可访问 */}
              <Route 
                path="/login" 
                element={
                  <PublicRoute>
                    <LoginPage />
                  </PublicRoute>
                } 
              />
              
              {/* 注册页面 - 仅未登录用户可访问 */}
              <Route 
                path="/register" 
                element={
                  <PublicRoute>
                    <RegisterPage />
                  </PublicRoute>
                } 
              />
              
              {/* 忘记密码页面 - 仅未登录用户可访问 */}
              <Route 
                path="/forgot-password" 
                element={
                  <PublicRoute>
                    <ForgotPasswordPage />
                  </PublicRoute>
                } 
              />
              
              {/* ==================== 商品相关路由 ==================== */}
              
              {/* 商品列表页面 - 所有用户可访问 */}
              <Route path="/products" element={<ProductListPage />} />
              
              {/* 商品详情页面 - 所有用户可访问 */}
              <Route path="/products/:id" element={<ProductDetailPage />} />
              
              {/* ==================== 受保护的路由 ==================== */}
              
              {/* 发布新商品页面 - 需要登录 */}
              <Route 
                path="/products/new" 
                element={
                  <ProtectedRoute>
                    <ProductEditPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 编辑商品页面 - 需要登录 */}
              <Route 
                path="/products/:id/edit" 
                element={
                  <ProtectedRoute>
                    <ProductEditPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 个人中心页面 - 需要登录 */}
              <Route 
                path="/profile" 
                element={
                  <ProtectedRoute>
                    <ProfilePage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 消息聊天页面 - 需要登录 */}
              <Route 
                path="/chat" 
                element={
                  <ProtectedRoute>
                    <ChatPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 交易管理页面 - 需要登录 */}
              <Route 
                path="/trades" 
                element={
                  <ProtectedRoute>
                    <TradesPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 交易详情页面 - 需要登录 */}
              <Route 
                path="/trades/:id" 
                element={
                  <ProtectedRoute>
                    <TradeDetailPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 收藏页面 - 需要登录 */}
              <Route 
                path="/favorites" 
                element={
                  <ProtectedRoute>
                    <FavoritesPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 设置页面 - 需要登录 */}
              <Route 
                path="/settings" 
                element={
                  <ProtectedRoute>
                    <SettingsPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 修改密码页面 - 需要登录 */}
              <Route 
                path="/settings/password" 
                element={
                  <ProtectedRoute>
                    <SettingsPasswordPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* 钱包页面 - 需要登录 */}
              <Route 
                path="/wallet" 
                element={
                  <ProtectedRoute>
                    <WalletPage />
                  </ProtectedRoute>
                } 
              />
              
              {/* ==================== 错误页面 ==================== */}
              
              {/* 404页面 - 捕获所有未匹配的路由 */}
              <Route path="*" element={<NotFoundPage />} />
            </Routes>
          </Suspense>
        </Content>
        
        {/* 底部信息栏 */}
        <AppFooter />
      </Layout>
    </Layout>
  )
}

export default App